export default {
  data () {
    return {
      pageScale: 1,
      pageOffset: 0,
      backgroundColor: '#020317'
    }
  },
  mounted () {
    if (this.$route.query.fixed) return
    this.autoSize()
    window.addEventListener('resize', this.autoSize)
  },
  computed: {
    scaleStyle () {
      return {
        transform: `scale(${this.pageScale}) translateX( ${this.pageOffset}px)`,
        transformOrigin: '0 0',
        backgroundColor: 'transparent'
      }
    },
    scaleStyleText () {
      // transform-origin: left top; transform: scale( ${pageScale} ) translateX( ${pageOffset}px)
      return `transform: scale(${this.pageScale}) translateX( ${this.pageOffset}px); transform-origin: 0 0; background-color: ${this.backgroundColor}`
    }
  },
  methods: {
    autoSize () {
      let basePage = {
        width: 1920,
        height: 1080
      }
      let win = {}
      win.width = window.innerWidth
      win.height = window.innerHeight
      // window.devicePixelRatio
      let minHeight = win.width / basePage.width * basePage.height
      // let scale = 1
      if (win.height > minHeight || win.height > basePage.height) {
        this.pageScale = win.width / basePage.width
        this.pageOffset = 0
      } else if (win.height < minHeight) {
        this.pageScale = win.height / basePage.height
        this.pageOffset = (win.width - basePage.width * this.pageScale) / 2 / this.pageScale
        // 特殊处理，加上padding的高度
        minHeight = win.height - 40
      } else {
        this.resetPage()
        return
      }
      // document.getElementsByTagName('body')[0].style = `height: ${minHeight}px; ${this.scaleStyleText}`
      document.getElementById('app').style.height = `${minHeight}px`
      document.getElementById('app').style.backgroundColor = basePage.backgroundColor
      document.getElementsByTagName('html')[0].style.backgroundColor = basePage.backgroundColor
    },
    resetPage () {
      this.pageScale = 1
      this.pageOffset = 0
      // document.getElementsByTagName('body')[0].style = ''
      document.getElementById('app').style.height = `auto`
      document.getElementById('app').style.backgroundColor = '#F4F4F4'
      document.getElementsByTagName('html')[0].style.backgroundColor = '#020317'
    }
  },
  beforeRouteLeave (to, from, next) {
    setTimeout(() => {
      this.resetPage()
      next()
    }, 100)
    window.removeEventListener('resize', this.autoSize)
  }
}
